<template>
	<view class="content">
		<TopBar :indexflag="true" :combakflag="false" :lang="false" :bottom="true" title="订单"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<view class="order-box">
			<u-empty v-if="totalnumber==0" style="padding-top: 300rpx;" mode="car" :text="$t('CarEmpty')"
				iconSize="100" textSize="14">
			</u-empty>
			<view class=""  v-for="(big_item,big_index) in  totalshop">
				<view class="item-card" v-for="(item,index) in totalshop[big_index].categories" v-if="totalshop.length!=0">
				<!-- 	<view class="title">
						<image src="../../static/images/lou.png" mode=""></image>
						<text class="name">喀什第一商铺</text>
					</view> -->
					<view class="sub-item" v-for="(sub_item,sub_index) in item.products" v-if="sub_item.qty">
						<view class="left">
							<image :src="getImgSrc(sub_item.img)" mode=""></image>
							<div class="name">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</div>
						</view>
						<view class="right">
							<view class="price">￥ {{(sub_item.price*sub_item.qty).toFixed(2)}}</view>
							<!-- 加减组件 -->
							<NumberCalculation :qty="sub_item.qty" :item="sub_item" :index="index" :shopid="big_item.id">
							</NumberCalculation>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foter-button" v-if="totalnumber!=0">
			<ShopBar title="ButtonFinish"></ShopBar>
		</view>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import ShopBar from "@/components/cart-shop/ShopBar.vue"
	import NumberCalculation from "@/components/cart-shop/NumberCalculation.vue"
	export default {
		components: {
			TopBar,
			ShopBar,
			NumberCalculation
		},
		data() {
			return {

			}
		},
		computed: {

			i18nLocale() {
				return this.$i18n.locale;
			},

			price() {
				return this.$store.state.shop.totalprice;
			},
			totalnumber() {
				return this.$store.state.shop.totalnumber;
			},
			totalshop() {
				return this.$store.state.shop.totalshop;
			},
		},
		methods: {
			changeTab(index) {
				this.tabs_index = index;
			},
			changeAppraise() {
				uni.navigateTo({
					url: '/pages/order/appraise'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.order-box {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.item-card {
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			
			.title{
				display: flex;
				align-items: center;
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: $uni-border-radius-lg;
					margin-bottom: $uni-spacing-margin-sm;
				}
				.name{
					padding: 0rpx 30rpx;
				}
			}
			.sub-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: $uni-font-size-base;
				margin-top: 20rpx;
				// border-bottom: 1rpx solid $uni-border-color;
				background-color: $uni-bg-color-box;
				border-radius: $uni-border-radius-base;
				box-shadow: $uni-bg-shadow;
				margin-top: 30rpx;
				padding: $uni-spacing-padding-sm;
				.left {
					display: flex;
					align-items: center;
					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: $uni-border-radius-lg;
						margin-bottom: $uni-spacing-margin-sm;
					}
					.name{
						padding: 0rpx 30rpx;
					}



				}

				.right {
					display: flex;
					align-items: center;

					.price {
						color: #000;
						font-size: $uni-font-size-base;
						padding: 0rpx 20rpx;
					}

					.number {
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm0;
						padding-top: 10rpx;
					}

				}
			}


		}

		.button-card {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 20rpx;

			.button {
				padding: 10rpx 30rpx;
				color: $uni-color-title;
				border: 2rpx solid $uni-border-color;
				border-radius: $uni-border-radius-lg;
				margin-left: 30rpx;
				font-size: $uni-font-size-sm1;
			}

			.again {
				color: $uni-color-topic;
				border: 2rpx solid $uni-color-topic;
			}
		}

	}

	.foter-button {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 124rpx;
		left: 0%;
	}
</style>